.header{
	width:100%;
	height:50px;
	background:#d43d3d;
	position:fixed;
	top:0px;
	left:0px;
	color:white;
	line-height:50px;
	text-align:center;
	z-index:50;
	ul{
		.search{
			float:right;
		}
		li{
			float:left;
			list-style:none;
		}
		.vidieo{
		    width: 32px;
		    height: 22.1px;
		    position: fixed;
		    left: 16px;
		    top: 1rem;
		    }
		  .search{
		    width: 23px;
		    height: 22.5px;
		    position: fixed;
		    right: 16px;
		    top: 1rem;
		  }
		.title{
			font-size:20px;
			letter-spacing:2px;
			font-weight: 600;
			position:fixed;
			top:0rem;
			left:40%;
		}
		a{
			text-decoration:none;
			color:white;
		}
	}
}







.example-enter {
  opacity: 0.01;
  transform: translateX(-100%);
}

.example-enter.example-enter-active {
  opacity: 1;
  transform: translateX(0px);
  transition: all 500ms ease-in;
}

.example-leave {
  opacity: 1;
  transform: translateX(0px);
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transform: translateX(-100%);
  transition: all 300ms ease-in;
}